<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="昵称">
              <el-input
                v-model="formInline.user"
                size="mini"
                placeholder="昵称模糊搜索"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名">
              <el-input
                v-model="formInline.name"
                size="mini"
                placeholder="用户名模糊搜索"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <controtable :logo="list" :page="doot" @pagepath="pageAPI" @addmen="vuensk" @changed="alter" @delcard="deluser" />
    <el-form
      ref="ruleForm"
      :model="from"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >

        <el-form-item label="用户名" prop="username">
          <el-input v-model="from.username" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="from.nickName" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="from.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="用户头像">
          <div class="grid-content bg-purple" style="">
            <el-upload
              class="upload-demo"
              action="/lejuAdmin/material/uploadFileOssSave"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccessAPI"
              style="display:flex;"
            >
              <img
                v-if="from.salt"
                :src="from.salt"
                class="avatar"
                style="width: 100px; height: 100px"
              >
              <div v-else style="width: 50px; height: 50px ;font-size:40px; background:#C0C4CC;  border-radius: 50%;">
                <i
                  class="el-icon-s-custom avatar-uploader-icon"
                />
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="from.roleIds" multiple placeholder="请选择" clearable>
            <el-option
              v-for="item in usid"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
              :clearable="true"
            />
          </el-select>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancle">取 消</el-button>
          <el-button
            v-if="newly"
            type="primary"
            @click="submitForms('ruleForm')"
          >确 定</el-button>
          <el-button
            v-else
            type="primary"
            @click="submitForms('ruleForm')"
          >修改</el-button>
          </span>
        </div></el-dialog></el-form>
  </div>
</template>

<script >
import {
  findUsersByPage,
  removeUser,
  saveUserRoles,
  updateUserRoles,
  userid,
  findAllRoles
} from '@/api/contro/index'
import controtable from './controtable'
import { getToken } from '@/utils/myAuth'
export default {
  components: { controtable },
  data() {
    return {
      formInline: {
        nickName: '',
        username: ''
      },
      doot: {
        start: 1,
        limit: 10,
        total: 0
      },
      total: 0,
      list: [],
      from: {
        roleIds: [], // 用户角色id集合
        nickName: '', // 昵称 ,
        password: '', // 密码
        username: '', // 用户名
        salt: '', // 用户头像
        roles: ''
      },
      newly: true,
      usid: [],
      dialogVisible: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'change' }
        ],
        roleIds: [
          { required: true, message: '请输入用户昵称', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    headers() {
      return { token: getToken() }
    }
  },
  created() {
    this.findUsersByPageAPI()
    findAllRoles().then((res) => {
      console.log(res)
      if (res.success) {
        this.usid = res.data.items
      }
    })
  },

  mounted() {},

  methods: {
    // 删除用户
    deluser(en) {
      console.log(en)
      removeUser(en).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.findUsersByPageAPI()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 修改
    alter(row) {
      userid(row.id).then(res => {
        console.log(res)
        if (res.success) {
          this.from = res.data.user
          this.newly = false
          this.dialogVisible = true
        }
      })
    },
    submitForms() {},
    vuensk(val) {
      console.log(val)
      this.dialogVisible = true
    },

    // 重置
    resetForm() {},
    pageAPI(val) {
      var _this = this
      findUsersByPage(val.start, val.limit).then((res) => {
        console.log(res)
        if (res.success) {
          _this.list = res.data.rows
          _this.doot.total = res.data.total
        }
      })
    },
    findUsersByPageAPI() {
      var _this = this
      console.log(this.doot.start, this.doot.limit, { ...this.formInline })
      findUsersByPage(this.doot.start, this.doot.limit).then((res) => {
        console.log(res)
        if (res.success) {
          _this.list = res.data.rows
          _this.doot.total = res.data.total
        }
      })
    },
    submitForms(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('是否提交注册或修改')
          this.addAPI()
          console.log(this.from)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancle() {
      this.newly = true
      this.dialogVisible = false
      this.$data.from = this.$options.data().from
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.$data.from = this.$options.data().from
          this.newly = true
        })
        .catch((_) => {})
    },
    handleAvatarSuccessAPI(res, file) {
      console.log(file.response.data.material.ossUrl)
      this.from.salt = file.response.data.material.ossUrl
      // this.ruleForm.product.pic = URL.createObjectURL(file.raw)
      // console.log(this.ruleForm.pic)
    },
    // 新增或者修改
    addAPI() {
      var _this = this
      if (this.newly) {
        saveUserRoles(this.from).then((res) => {
          if (res.success) {
            _this.$message.success('添加成功')
            _this.findUsersByPageAPI()
            this.dialogVisible = false
            this.newly = true
            this.$data.from = this.$options.data().from
          }
        })
      } else {
        // updateUserRoles
        updateUserRoles(this.from).then((res) => {
          if (res.success) {
            _this.$message.success('修改成功')
            _this.findUsersByPageAPI()
            this.dialogVisible = false
            this.newly = true
            this.$data.from = this.$options.data().from
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>
